<template>
<div class="audio_class">
     
    <div class="ListenSongtitle">
            <h1>歌名: {{ count.songName }}</h1>
            <h1>作者: {{ count.countName }}</h1>
    </div>

    <div>
        <audio controls  :src="url" ></audio>
    </div>
    <div>
        <el-avatar
        :src="count.pick_image"
      />
    </div>
    
    
   
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import emitter  from "../../utils/eventbus";
export default defineComponent({
     name: 'Foot',
    setup() {
        let musicUrl: any = reactive({});
        let url = ref();
        let array: any = reactive({});
        let count = reactive({
            songName: "",
            countName: "",
            pick_image: "" || "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg"


        });
        emitter.on('listentMu', (info)=>{
                musicUrl.value = info
                url.value = musicUrl.value.url.data.data[0].url
                // array.values =  musicUrl.value.object;
                count.songName = musicUrl.value.object.name
                count.countName = musicUrl.value.object.artists[0].name
                count.pick_image = musicUrl.value.object.album.blurPicUrl

        })

        return{
            musicUrl,
            url,
            array,
            count
        }
    },
})
</script>

<style lang="less" scoped>

.audio_class{
    display: flex;
    justify-content: space-around;
    box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    .ListenSongtitle{
        display: flex;
        flex-direction: column; 
        margin-top: 10px;
    }

    div{
        display: flex;
        align-items: center;
    }

}
</style>
